// src/APP.vue

<template>
<div id="blog-posts-events-demo" class="demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <!-- v-bind向子组件传递数据；@@enlarge-text监听子组件的事件 -->
    <blog-post
       v-for="post in posts"
       :key="post.id"
       :title="post.title"   
       @enlarge-text="onEnlargeText"   
    ></blog-post>
  </div>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import BlogPost from './components/blog-post.vue'

export default defineComponent({
  name:"APP",
  components: {
    BlogPost
  },
  setup() {
    const appData = reactive({
      posts: [
        { id: 1, title: 'My journey with Vue'},
        { id: 2, title: 'Blogging with Vue'},
        { id: 3, title: 'Why Vue is so fun'}
      ],
      postFontSize: 1
    })

    const onEnlargeText = () => appData.postFontSize += 0.1 


    return {
      ...toRefs(appData),
      onEnlargeText
    }
  }
})
</script>